<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>杭州互帮电子商务有限公司</title>
		<link rel="shortcut icon" href="logos.ico" type="image/x-icon" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<jsp:include page="layouts/css.jsp"></jsp:include>
	</head>

	<body>
	
		<div class="navbar navbar-default" id="navbar">
				<jsp:include page="layouts/header.jsp"></jsp:include>			
		</div>
		

		<div class="main-container" id="main-container">

			<div class="main-container-inner">
				<a class="menu-toggler" id="menu-toggler" href="#">
					<span class="menu-text"></span>
				</a>

				<div class="sidebar" id="sidebar">
					<jsp:include page="layouts/menu.jsp"></jsp:include>
				</div>

				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<script type="text/javascript">
							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
						</script>

						<ul class="breadcrumb">
							<li>
								<i class="icon-home home-icon"></i>
								<a href="#">Home</a>
							</li>

							<li>
								<a href="#">广告管理</a>
							</li>
							<li class="active">轮播图管理</li>
						</ul><!-- .breadcrumb -->
					</div>
					
					

					<div class="page-content">
						<div class="page-header">
							
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">

								<div class="row">
									<div class="col-xs-12">
									
									<a class="btn btn-xs btn-success" href="${applicationScope.actionPath}/banners/initAddBanner"> 
											<i class="icon-plus bigger-120">Banners</i>
										</a>
										
<!-- 										<div > -->
<%-- 											<a class="btn btn-success btn-lg btn-block" href="${applicationScope.actionPath}/banners/initAddBanner.do"><i class="icon-plus bigger-120" >Banners</i></a> --%>
<!-- 										</div> -->
										<div style="height:10px">
											
										</div>
										<div class="table-header">
											Banners列表
										</div>

										<div class="table-responsive">
											<table id="sample-table-2" class="table table-striped table-bordered table-hover table-center">
												<thead>
													<tr>
														<th class="center">
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
															</label>
														</th>
														<th>图</th>
														<th class="hidden-480">标题</th>
														<th style="width:30%">排序</th>
														<th></th>
													</tr>
												</thead>

												<tbody  class="center">

													<tr>
														<td class="center">
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
															</label>
														</td>

<!-- 														<td> -->
<!-- 															<a href="#">once.com</a> -->
<!-- 														</td> -->
<!-- 														<td>$20</td> -->
<!-- 														<td class="hidden-480">1,400</td> -->
<!-- 														<td>Apr 04</td> -->



														<td>
															<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
																<a class="blue" href="#">
																	<i class="icon-zoom-in bigger-130"></i>
																</a>

																<a class="green" href="#">
																	<i class="icon-pencil bigger-130"></i>
																</a>

																<a class="red" href="#">
																	<i class="icon-trash bigger-130"></i>
																</a>
															</div>

															<div class="visible-xs visible-sm hidden-md hidden-lg">
																<div class="inline position-relative">
																	<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown">
																		<i class="icon-caret-down icon-only bigger-120"></i>
																	</button>

																	<ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
																		<li>
																			<a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																				<span class="blue">
																					<i class="icon-zoom-in bigger-120"></i>
																				</span>
																			</a>
																		</li>

																		<li>
																			<a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
																				<span class="green">
																					<i class="icon-edit bigger-120"></i>
																				</span>
																			</a>
																		</li>

																		<li>
																			<a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
																				<span class="red">
																					<i class="icon-trash bigger-120"></i>
																				</span>
																			</a>
																		</li>
																	</ul>
																</div>
															</div>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>

							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div><!-- /.main-content -->

				<jsp:include page="layouts/foot.jsp"></jsp:include>
			</div><!-- /.main-container-inner -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="icon-double-angle-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->

		<jsp:include page="layouts/js.jsp"></jsp:include>

		<script type="text/javascript">
		var oTable1;
		$(document).ready(function () {
				 oTable1 = $('#sample-table-2').dataTable({
					"language": tableLanguage,
					"sEcho" : 0,
	        		"iDisplayStart" :0,
	        		"iDisplayLength" : 5,
	        		"pagingType":"full_numbers",
					"bPaginate": true,  //翻页功能
					"bLengthChange": false, //改变每页显示数据数量
					"bFilter": false, //过滤功能
					"bSort": false, //排序功能
					"bInfo": true,//页脚信息
					"bAutoWidth": true, //自动宽度
					"bProcessing": true, //当datatable获取数据时候是否显示正在处理提示信息。
					"bStateSave":true,
					"sServerMethod": "POST",
					"sAjaxSource": '${applicationScope.actionPath}/banners/getBannerData',
					"fnServerParams": function(aoData){
// 						aoData.push(
// 							{"name":"mobile","value":$('#mobile').val()},
// 							{"name":"companyShortName","value":$('#companyShortName').val()}
// 						);
					},
					"bServerSide" : true,
					
					"columns": [
						{
							orderable : false,
							createdCell : function(td, cellData, rowData, row, col) {
								$(td).html('<label><input style="text-align:center" type="checkbox" class="ace" /><span class="lbl"></span></label>');
							},
							data : null
						},
						{
							orderable : false,
							createdCell : function(td, cellData, rowData, row, col) {
								html = '<img style="width:80px;height:60px;text-align:center" src="'+rowData.thumbnail+'">';
								$(td).html(html);
							},
							data : null
						
						},
						{
							"data": 'title'
						},
						{
							orderable : false,
							createdCell : function(td, cellData, rowData, row, col) {
								html = '<input style="border-radius:15px !important;position:relative;left:50%;transform:translateX(-50%);text-align:center" class="col-xs-2"  type="text" value="'+rowData.sort+'">';
								$(td).html(html);
							},
							data : null
						},
						
						
						{
							orderable : false,
							createdCell : function(td, cellData, rowData, row, col) {
								var html = "";
								var is = "'"+rowData.review+"'";
								html = '<td><div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">';
								if(rowData.review=='Y'){
									html+='<a class="blue" href="javascript:void(0)" onclick="reviewBanner('+rowData.id+','+is+')"  title="取消审核"><i class="icon-check bigger-130"></i></a>';
								}else{
									html+='<a class="blue" href="javascript:void(0)" onclick="reviewBanner('+rowData.id+','+is+')"  title="审核"><i class="icon-check-empty bigger-130"></i></a>';
								}
								
								html+='<a class="green" href="${applicationScope.actionPath}/banners/initEdit.do?id='+rowData.id+'"  title="编辑"><i class="icon-pencil bigger-130"></i></a>';
								
								html+='<a class="red" href="javascript:void(0)" onclick="deleteBanner('+rowData.id+')" title="删除"><i class="icon-trash bigger-130"></i></a></div></td>';
								
								$(td).html(html);
							},
							data : null
						}]
				});
				
				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
						
				});	
				
				  function timetrans(date){
		        		var date = new Date(date);
		        		var Y = date.getFullYear() + '-';
		        	    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		        	    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
		        	    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
		        	    var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
		        	    var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
		        	    return Y+M+D+h+m+s;
		        }
			});
		
			//审核
		      function reviewBanner(id,review){
		      	  $.ajax({
		   			  url:"${applicationScope.actionPath}/banners/reviewBanner",
		   			  type:"post",
		   			  dataType:"json",
		   			  data:{
			    			"id":id,
				   			"review":review
			    		},
		   			  success:function(data){
		  				if(data.code=="200"){
		  					oTable1.fnDraw(false);
		  				}else{
		  					alert(data.message);
		  				}
		  				
		   			  }
		   		 });
	    	}
			
			
			//修改
// 			function editBanner(banner){
// 				$.ajax({
// 					url:"${applicationScope.actionPath}/banners/updateBanner",
// 					type:"post",
// 					dataType:"json",
// 					data:{
// 						"banner":banner
// 					},
// 					success:function(data){
// 						if(data.status==200){
// 							table.fnDraw;
// 						}else{
// 							alert(data.message)
// 						}
// 					}
					
					
// 				});
// 			}
			
		//删除
			function deleteBanner(id){
				$.ajax({
					url:"${applicationScope.actionPath}/banners/deleteBanner",
					type:"post",
					dataType:"json",
					data:{
						"id":id
					},
					success:function(data){
						if(data.code=="200"){
							oTable1.fnDraw(false);//局部刷新页面
						}else{
							alert(data.message)
						}
					}
					
				});
			}
		</script>
</body>
</html>
